<template>
  <div class="app-container">
    <form-filter :lock-state="1" @on-filter="submitFilterForm"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column label="代充/授信变更时间" align="center">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="代理账户名" prop="proxyUserName" align="center"></el-table-column>
      <el-table-column label="账户类型" prop="proxyType" align="center">
        <template slot-scope="{row}">
          {{row.proxyType}}
        </template>
      </el-table-column>
      <el-table-column label="代充/授信账变类型" align="center">
        <template slot-scope="{row}">
          {{row.optType | toConverter('SPLIT_CHANGE')}}
        </template>
      </el-table-column>
      <el-table-column label="操作动作">
        <template slot-scope="{row}">
          <span v-if="[1,3,5].includes(row.optType)">{{`操作人（${row.optUserName}）`}}</span>
          <span v-if="row.optType === 2">{{`上分给下级代理（${row.modifyUserName}）`}}</span>
          <span v-if="row.optType === 4">{{`上分给下级会员（${row.modifyUserName}）`}}</span>
        </template>
      </el-table-column>
      <el-table-column label="变更金额">
        <template slot-scope="{row}">
          {{row.changeAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="代充/授信额度变更前">
        <template slot-scope="{row}">
          {{row.creditedAmountBefore | currency}}
        </template>
      </el-table-column>
      <el-table-column label="代充/授信额度变更后">
        <template slot-scope="{row}">
          {{row.creditedAmountAfter | currency}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>

</template>

<script>

import { getMemberAdjustList } from '@/services/api/member';
import FormFilter from './formFilter';
import { grid } from '@/build';

export default {
  name: 'summary-points',
  components: { FormFilter },
  mixins: [grid],
  data() {
    return {
      tableData: {
        pageinfo: {},
      },
      auditStep: 0,
      rowData: {},
      filters: {
        size: 20,
        page: 1,
        startDate: moment().startOf('isoWeek').format('YYYY-MM-DD 00:00:00'),
        endDate: moment().format('YYYY-MM-DD 23:59:59'),
      },
      filterDateType: false,
    };
  },
  methods: {
    submitFilterForm(formInline) {
      formInline = this.formatTime(formInline);
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
    formatTime(form) {
      const { time } = form;
      let startDate; let
        endDate;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startDate = form.time[0];
        endDate = form.time[1];
        form = { ...form, startDate, endDate };
      } else {
        this.filters.startDate = undefined;
        this.filters.endDate = undefined;
      }
      delete form.time;
      return form;
    },

  },
  mounted() {
    this.bindGet(getMemberAdjustList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
